<template>
  <a-drawer
    title="通知单发送设置"
    :visible="visible"
    :destroyOnClose="true"
    :width="450"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-form>
      <div style="display: flex; align-items: center">
        <span
          style="
            width: 3px;
            height: 26px;
            background-color: #2681f3;
            margin-right: 5px;
          "
        ></span>
        <h3 style="margin-bottom: 0">通知单发送提醒</h3>
      </div>
      <a-row :gutter="12" style="margin-top: 30px">
        <a-col :span="12">
          <a-form-item label="应收日期前：" v-bind="validateInfos.remindDay">
            <a-input-number
              v-model:value="modelRef.remindDay"
              :min="0"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <span style="display: block; margin-top: 5px">自然日提醒</span>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRaw, watch } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../common/utils/request";
const useForm = Form.useForm;

export default defineComponent({
  name: "NoticeSetting",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    /**
     * @description: 表单字段
     */
    const modelRef = reactive({
      remindDay: 0,
    });

    /**
     * @description: 验证规则
     */
    const rulesRef = reactive({
      remindDay: [{ required: true, message: "标签名称为必填项" }],
    });

    /**
     * @description: 触发关闭
     */
    const closeModal = () => {
      context.emit("closeTag");
    };

    /**
     * @description: 创建表单
     */
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    /**
     * @description: 提交表单
     */
    const onSubmit = () => {
      validate()
        .then(() => {
          request
            .put("/org", "/notice/remindSetting", {
              remind_day: modelRef.remindDay,
            })
            .then((res) => {
              message.success("设置成功");
              context.emit("success");
            });
        })
        .catch((err) => {
          console.log("error", err);
        });
    };

    /**
     * @description: 初始化
     */
    const init = () => {
      getBasicInfo();
    };
    const getBasicInfo = () => {
      request.get("/org", "/notice/getRemindSet", {}).then((res) => {
        modelRef.remindDay = res.remindData.remind_day || 0;
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          // 打开时初始化数据
          init();
        } else {
          // 关闭时重置数据
          resetFields();
        }
      }
    );
    return {
      closeModal,
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-form-item) {
  margin-bottom: 0;
}
</style>
